<!--
 * @docName: phoneAuthentication.vue
 * @Author: mwl
 * @Date: 17:10
 * @LastEditors: mwl
 * @LastEditTime: 17:10
-->
<template>
  <div class='content-main'>
    <a-form-model ref="model" :model="model" :rules="validatorRules" class="password-retrieval-form">
      <div class="input-info">
        <h2>验证法人手机号</h2>
        <a-form-model-item prop="phone" label="实名手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model="model.phone" size="large" placeholder="11 位手机号" />
        </a-form-model-item>
<!--         v-if='!smsShow'-->
        <a-row>
          <a-form-model-item prop="captcha" label="验证码" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-col class="gutter-row" :span="14">
              <a-input v-model="model.captcha" size="large" type="text" placeholder="验证码" autocomplete="off">
                <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
              </a-input>
            </a-col>
            <a-col class="gutter-row" :span="9" :offset="1">
              <a-button
                class="getCaptcha"
                size="large"
                :disabled="state.smsSendBtn"
                @click.stop.prevent="getCaptcha"
                v-text="!state.smsSendBtn && '发送验证码'||(state.time+' s')"></a-button>
            </a-col>
          </a-form-model-item>
        </a-row>
      </div>
      <a-form>
        <a-form-item :wrapperCol="{span: 3, offset: 3}">
          <!--        <a-button @click="prevStep">上一步</a-button>-->
<!--          v-if='!model.phone'-->
          <a-button
            type="primary"
            htmlType="submit"
            @click.stop.prevent="nextStep"
          >下一步</a-button>
          <a-button type="link" @click='skipEvent' style='margin-left: 10px'>
            跳过
          </a-button>
        </a-form-item>
      </a-form>
    </a-form-model>
  </div>
</template>

<script>
import { getCheckChannelLegal, getInfoCheckLoginPhone, getvCodeSender } from '@api/register'

export default {
  name: 'phoneAuthentication',
  props:['channelData'],
  data () {
    return {
      loading: false,
      model: {},
      ssqKey:'',
      labelCol: { span:3},
      wrapperCol: { span: 10 },
      validatorRules: {
        phone: [
          { required: true,message: '请输入手机号!' },
          { validator: this.handlePhoneCheck }
        ],
        captcha: [
          { required: true ,message: '请输入验证码!'},
          { validator: this.handleCaptchaCheck }
        ]
      },
      smsShow:false,
      state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
    }
  },
  watch:{
    channelData:{
      handler(val){
        this.channelData = val;
        if (this.channelData.channelLegalVo != null && this.channelData.channelLegalVo.phone != null) {
          this.model = this.channelData.channelLegalVo;
          this.smsShow = true
        }
      }
    }
  },
  methods:{
    nextStep(){
      this.$refs.model.validate(valid => {
        if (valid) {
          let params = {};
          params.phone = this.model.phone;
          params.agreeId = this.channelData.agreeInfoVo.id;
          params.key = this.ssqKey;
          params.code = this.model.captcha;
          getInfoCheckLoginPhone(params).then((res) => {
            if(res.success){
              this.$emit('processTypeFun',4);
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })

    },
    skipEvent(){
      this.$router.push({
        path: '/registerProcess/submitSuccess'
      })
    },
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.$refs['model'].validateField(['phone'], (err) => {
          if (!err) {
            this.state.smsSendBtn = true;
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 60;
                that.state.smsSendBtn = false;
                window.clearInterval(interval);
              }
            }, 1000);
            const hide = this.$message.loading('验证码发送中..', 3);
            const params = {
              mobile: this.model.phone,
              identity:this.channelData.channelLegalVo.legalCard,
              name:this.channelData.channelLegalVo.legalName,
            };
            getvCodeSender(params).then((res) => {
              if (!res.success) {
                this.$message.warning(res.message);
                setTimeout(hide, 0);
              }else{
                this.ssqKey = res.result
              }
              setTimeout(hide, 500);
            }).catch(err => {
              setTimeout(hide, 1);
              clearInterval(interval);
              that.state.time = 60;
              that.state.smsSendBtn = false;
              this.$message.warning(err);
            });
          }
        }
      );
    },
    handlePhoneCheck(rule, value, callback) {
      let reg = /^1\d{10}$/
      if(!reg.test(value)){
        callback(new Error("请输入正确手机号"))
      }else{
        callback()
      }
    },
    handleCaptchaCheck(rule, value, callback){
      if(!value){
        callback(new Error("请输入验证码"))
      }else{
        callback();
      }
    },
  }
}
</script>

<style scoped>
</style>
